<template>
  <div class="app-container">
    <!-- Header Navigation -->
    <el-header class="header">
      <div class="logo-container">
        <!-- <img src="/api/placeholder/150/50" alt="Logo" class="logo" /> -->
      </div>
      <el-menu mode="horizontal" class="nav-menu" :ellipsis="false" router>
        <el-menu-item
          v-for="item in menuItems"
          :key="item.index"
          :index="item.index"
        >
          {{ item.label }}
        </el-menu-item>
        <el-menu-item index="/student">首页</el-menu-item>
      </el-menu>
      <div class="right-section">
        <el-input placeholder="搜索" class="search-input" prefix-icon="Search">
        </el-input>
        <el-avatar icon="UserFilled" size="small" class="avatar" />
      </div>
    </el-header>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { ElHeader, ElMenu, ElMenuItem, ElInput, ElAvatar } from 'element-plus';

// Define the type alias for navigation item
type NavItem = {
  index: string;
  label: string;
};

const menuItems = ref<NavItem[]>([
  { index: '/student/Academyanalyse', label: '个人学情分析' },
  { index: '/student/ExamList', label: '在线测试' },
  { index: '/student/errorQue', label: '错题管理' }
]);

</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 0;
  height: 60px;
  background-color: #fff;
}

.logo-container {
  margin-right: 20px;
}

.logo {
  height: 40px;
}

.nav-menu {
  flex-grow: 1;
  border-bottom: none;
}

.right-section {
  display: flex;
  align-items: center;
}

.search-input {
  margin-right: 20px;
  width: 200px;
}

.avatar {
  cursor: pointer;
}
</style>
